<template>
  <div>
    <el-container>
      <el-header style="height: 100%;">
        <common-header/>
      </el-header>
      <el-main class="bj-color">
        <!--路由出口-->
        <router-view></router-view>
        <message-board class="fixed-button"/>
      </el-main>
      <el-footer style="padding: 0;margin: 0">
        <common-footer/>
      </el-footer>
    </el-container>
  </div>
</template>
<!--页面架构-->
<script>
  import CommonHeader from "../components/CommonHeader";
  import CommonFooter from "../components/CommonFooter";
  import MessageBoard from "../components/MessageBoard";
    export default {
        name: "Main",
        data(){
            return{
                activeName: 'first'
            }
        },
        components:{
            CommonHeader,
            CommonFooter,
            MessageBoard
        }
    }
</script>

<style scoped>
  .header{
    width: 100%;
    /* height: 100%; */
    /* border: 1px solid red; */
    /* padding: 0;
    height: auto; */
  }
  .fixed-button {
    width: 250px;
    position: fixed;
    left: 20px;
    padding: 10px;
    /* background-color: #f44336; */
    color: #fff;
    cursor: pointer;
    z-index: 100;
  }
  div /deep/ .el-main{
    padding: 0;
  }
  .bj-color{
    background-color: #f5f5f5;
  }
</style>
